<template>
  <div class="clearfix">
    <!-- 定义抽屉组件 -->
    <a-drawer
      title="抽屉标题1"
      placement="right"
      :closable="true"
      :visible="drawerVisible"
      @close="closeDrawer"
    >
      <!-- 抽屉内容放在这里 -->
      <div >
        <h2>Data List</h2>
        <ul>
          <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
        </ul>
      </div>
      <div>
        <p>加载中...</p>
      </div>
    </a-drawer>

    <Button type="primary" shape="round" size="small" v-if="visibleButtons" @click="onButtonClick">
      {{ btnTitle }}
    </Button>

    <Description
      :title="popTitle"
      :collapseOptions="{ canExpand: false, helpMessage: popHelp }"
      :column="1"
      bordered
      :data="tableData"
      :schema="tableSchema"
      size="small"
    >
      <template #title>
        <h1 class="custom-pop-title">{{ popTitle }}</h1>
      </template>

      <template #extra>
        <!-- 这里不生效的原因是因为封装了一层,不是原生 -->
        <Button type="primary">Edit</Button>
      </template>
    </Description>

    <div class="my-div">
      <Space :size="4">
        <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickFire">自查记录</Button>
        <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickFire">自查记录</Button>
        <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickFire">隐患记录</Button>
        <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickPolice">
          <Tag :color="getFireZcColor()">{{ getFireZcText() }}</Tag>
        </Button>
        <Button type="primary" size="small" @click="onButtonClickPolice">
          <Tag :color="getJcColor()">{{ getJcText() }}test自查</Tag>
        </Button>

        <!-- 添加一个按钮来触发抽屉 -->
        <button type="primary" size="small" @click="showDrawer">打开抽屉</button>

        <Button type="primary" size="small" @click="showDrawer">打开抽屉</Button>
      </Space>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Description } from '/@/components/Description/index';
import { Tabs, Space, Divider, Drawer, Tag, Collapse, Button, Popover, Row, Col } from 'ant-design-vue';
import { inject } from 'vue';
import { getCheckHousrInfoApi2 } from '/@/api/demo/system';
import { defHttp } from '/@/utils/http/axios';

export default {
  name: 'MaplibPopup',
  components: {
    Description,
    Tabs,
    Space,
    Divider,
    Drawer,
    Tag,
    Collapse,
    Button,
    'a-drawer': Drawer,
    Popover,
    Row,
    Col,
  },
  props: {
    obj: {
      type: Object,
    },
    tableSchema: {
      type: Array,
    },
    btnTitle: {
      default: '查看场所',
      type: String,
    },
    popTitle: {
      default: '房屋基本信息',
      type: String,
    },
    popHelp: {
      default: '房屋基本信息',
      type: String,
    },
    visibleButtons: {
      default: false,
      type: Boolean,
    },
    visibleStatus: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      drawerVisible: false,
      dataList: [],
    };
  },
  computed: {
    tableData() {
      return this.obj || {};
    },
  },
  created() {
    console.log('created');
     this.fetchData();
  },
  methods: {
    // open(id) {
    //   this.fetchData()
    // },
    
    async fetchData() {

      let res = await defHttp.get({
    url: `/village/baseInfo/baseInfoDetaile`,
    params: {
      pageIndex: 0,
      limit: 15,
      fwbh: '110105000061590',
      orderBy: 0,
    },
    headers: {
      // @ts-ignore
      ignoreCancelToken: true,
    },
  });
  console.log('created2',res);
  this.dataList = res.items;
      // let res = await defHttp.get({ url:'/account/getAccountInfo' })
      // // let res = await getCheckHousrInfoApi2(null);
      // console.log('created222',res);
      // try {
      //   const response = await axios.get('http://localhost:5008/api/v1/houses/baseInfo/baseInfoDetaile', {
      //     params: {
      //       pageIndex: 0,
      //       limit: 15,
      //       fwbh: '110105000061590',
      //       orderBy: 0,
      //       _t: Date.now(),
      //     },
      //   });
      //   this.dataList = response.data.items;
      // } catch (error) {
      //   console.error('Error fetching data:', error);
      // }
    },
    showDrawer() {
      this.drawerVisible = true;
    },
    closeDrawer() {
      this.drawerVisible = false;
    },
    onButtonClick() {
      this.$emit('clickbutton', this.obj);
    },
    onButtonClickFire() {
      this.$emit('clickbuttonfire', this.obj);
    },
    onButtonClickPolice() {
      this.$emit('clickbuttonpolice', this.obj);
    },
    onButtonClickZhujian() {
      this.$emit('clickbuttonzhujian', this.obj);
    },
    getFireZcColorAndText() {
      if (this.tableData && this.tableData['pczt2']) {
        return this.tableData['zcyhcount'] === '0' ? { color: 'red', text: '自查有隐患' } : { color: 'green', text: '自查无隐患' };
      }
      return { color: 'yellow', text: '状态未知' };
    },
    getJcColorAndText() {
      if (this.tableData && this.tableData['pczt2']) {
        return this.tableData['jcyhcount'] === '0' ? { color: 'red', text: '检查有隐患' } : { color: 'green', text: '检查无隐患' };
      }
      return { color: 'yellow', text: '状态未知' };
    },
    getZhujianColorAndText() {
      if (this.tableData && this.tableData['levelHousing']) {
        const level = this.tableData['levelHousing'];
        if (level === '0') return { color: 'green', text: '未排查' };
        if (level === '1') return { color: 'red', text: '严重隐患' };
        if (level === '2') return { color: 'green', text: '无隐患' };
        if (level === '3') return { color: 'orange', text: '一般隐患' };
      }
      return { color: 'yellow', text: '状态未知' };
    },
    getFireZcColor() {
      return this.getFireZcColorAndText().color;
    },
    getFireZcText() {
      return this.getFireZcColorAndText().text;
    },
    getJcColor() {
      return this.getJcColorAndText().color;
    },
    getJcText() {
      return this.getJcColorAndText().text;
    },
    getZhujianColor() {
      return this.getZhujianColorAndText().color;
    },
    getZhujianText() {
      return this.getZhujianColorAndText().text;
    },
  },
};
</script>

<style scoped>
.ant-tag {
  margin-right: 0px;
}
.my-div {
  text-align: center;
  padding: 1px;
  margin: 1px;
  font-size: 18px;
  line-height: 1.5;
}
.custom-pop-title {
  font-size: 24px;
}
</style>
